<template>
    <custom-page-box>
        <div class='head-tips'>
            <p v-if="active === '1'">服务类别必须添加至三级分类。如未添加至三级分类，则当前类别默认为禁用状态</p>
            <p v-else>优品分类必须添加至二级分类。如未添加至二级分类，则当前类别默认为禁用状态</p>
        </div>
        <div class='operation-config-category-container'>
            <a-tabs v-model="active">
                <a-tab-pane key="1" tab="服务类别"></a-tab-pane>
                <a-tab-pane key="2" tab="优品分类"></a-tab-pane>
            </a-tabs>
            <label-tree v-if="active === '1'"></label-tree>
            <label-tree-quality v-else></label-tree-quality>
        </div>
    </custom-page-box>
</template>

<script>
import LabelTree from '@/components/operation-config/label-tree'
import LabelTreeQuality from '@/components/operation-config/label-tree-quality'

export default {
    name: 'OperationConfigCategory',
    components: {
        LabelTree,
        LabelTreeQuality
    },
    data () {
        return {
            active: '1'
        }
    }
}
</script>

<style scoped lang='less'>
.head-tips {
    margin: -10px -10px 10px;
    background-color: #DDF7E9;
    height: 44px;
    padding: 10px 0 10px 14px;
    p {
        width: 100%;
        margin: 0;
        color: @primary-color;
        font-size: 14px;
        line-height: 24px;
    }
}
.operation-config-category-container {
    background: #fff;
    border-radius: 6px;
    height: calc(100% - 44px);
    overflow-y: auto;
    .title {
        padding: 18px 20px 10px;
        font-size: 14px;
        color: #2A2A2A;
        border-bottom: 1px solid #F3F3F3;
    }
  ::v-deep{
    .label-tree-container{
      padding: 10px 20px;
    }
  }
}
</style>
